<template>
	<view class="changes-container">
		<view class="change-card" >
			<view class="change-icon">
				<u-icon name="file-text-fill" color="#1776CE" size="44"></u-icon>
			</view>
			<view class="change-right">
				<view class="change-top">
					<h1 class="u-line-1">{{list.changebefore}}</h1>
					<u-icon name="arrow-right" color="#A9C1D7" size="24"></u-icon>
					<h1 class="u-line-1">{{list.changeafter}}</h1>
				</view>
				<view class="change-course">
					<p>{{list.trainingcourse}}</p>
					<p>{{list.sectionnum}}</p>
				</view>
				<view class="achievement">
					<p>负责人：{{list.personcharge}}</p>
					<p>成绩：合格</p>
				</view>
				<view class="change-time">{{list.changetime}}</view>
			</view>
		</view>
		<view class="list-warp">
			<view class="list">
				<view class="list-box" >
					<view class="item">
						<view class="item-cell u-line-1">
							<text>授课人名字：</text>
							<text>{{list.theacher}}</text>
						</view>
						<view class="item-cell u-line-1">
							<text>培训时间：</text>
							<text>{{list.trainingtime}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="charge-img">
			<h1>负责人签字</h1>
			<u-image width="100%" height="200rpx" :src="list.signaturepersoncharge"></u-image>
		</view>
		<view class="charge-img">
			<h1>受教人签字</h1>
			<u-image width="100%" height="200rpx" :src="list.signaturetrainee"></u-image>
		</view>
	</view>
</template>

<script>
	import resources from '@/libs/resources.js'
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		getDictionaryDataSelector,
		getDataInterfaceRes
	} from '@/api/common'
	import request from '@/utils/request'
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				sortValue: '',
				searchForm: {
					changebefore: undefined,
					changeafter: undefined,
					trainingcourse: undefined,
					coursetime: undefined,
					personcharge: undefined,
					changetime: undefined,
					trainingtime: undefined,
					theacher: undefined,
				},
				downOption: {
					use: true,
					auto: false
				},
				upOption: {
					page: {
						num: 0,
						size: 20,
						time: null,
					},
					empty: {
						use: true,
						icon: resources.message.nodata,
						tip: "暂无数据",
						fixed: true,
						top: "300rpx",
						zIndex: 5,
					},
					textNoMore: '没有更多数据',
					toTop: {
						bottom: 250
					}
				},
				list: [{
						changebefore: "中级电工",
						changeafter: "高级电工",
						trainingcourse: "矿区特殊作业安全技法",
						sectionnum: "23节",
						personcharge: "李达胜",
						achievement: "合格",
						changetime: "2021-12-20 15:12:00",
						theacher:"赵大程",
						trainingtime:"2021-12-20 15:12:00",
					},
				],
				listQuery: {
					sort: 'desc',
					sidx: '',
					keyword: '',
					json: ''
				},
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}, ],
				sortOptions: [{
						label: '变更前工种降序',
						sidx: 'changebefore',
						value: 'changebeforedesc',
						sort: 'desc'
					},
					{
						label: '变更前工种升序',
						sidx: 'changebefore',
						value: 'changebeforeasc',
						sort: 'asc'
					},
					{
						label: '变更后工种降序',
						sidx: 'changeafter',
						value: 'changeafterdesc',
						sort: 'desc'
					},
					{
						label: '变更后工种升序',
						sidx: 'changeafter',
						value: 'changeafterasc',
						sort: 'asc'
					},
					{
						label: '培训课程降序',
						sidx: 'trainingcourse',
						value: 'trainingcoursedesc',
						sort: 'desc'
					},
					{
						label: '培训课程升序',
						sidx: 'trainingcourse',
						value: 'trainingcourseasc',
						sort: 'asc'
					},
					{
						label: '培训课时降序',
						sidx: 'coursetime',
						value: 'coursetimedesc',
						sort: 'desc'
					},
					{
						label: '培训课时升序',
						sidx: 'coursetime',
						value: 'coursetimeasc',
						sort: 'asc'
					},
					{
						label: '负责人降序',
						sidx: 'personcharge',
						value: 'personchargedesc',
						sort: 'desc'
					},
					{
						label: '负责人升序',
						sidx: 'personcharge',
						value: 'personchargeasc',
						sort: 'asc'
					},
					{
						label: '变更时间降序',
						sidx: 'changetime',
						value: 'changetimedesc',
						sort: 'desc'
					},
					{
						label: '变更时间升序',
						sidx: 'changetime',
						value: 'changetimeasc',
						sort: 'asc'
					},
					{
						label: '培训时间降序',
						sidx: 'trainingtime',
						value: 'trainingtimedesc',
						sort: 'desc'
					},
					{
						label: '培训时间升序',
						sidx: 'trainingtime',
						value: 'trainingtimeasc',
						sort: 'asc'
					},
					{
						label: '授课人名字降序',
						sidx: 'theacher',
						value: 'theacherdesc',
						sort: 'desc'
					},
					{
						label: '授课人名字升序',
						sidx: 'theacher',
						value: 'theacherasc',
						sort: 'asc'
					},
				],
				menuId: '',
				listid:''
			}
		},
		onLoad(e) {
			this.listid=e.id
			this.menuId = e.menuId
			uni.$on('refresh', () => {
				this.list = [];
				this.mescroll.resetUpScroll();
			})
			this.dataAll()
			this.upCallback()
		},
		onUnload() {
			uni.$off('refresh')
		},
		
		methods: {
			

			dataAll() {},
			closeData(e) {
				if (e == 1) {
					// this.reset()
				}
			},
			upCallback(page) {
				//             for(let i in this.searchForm){
				// 	if(!this.searchForm[i]){
				// 		delete this.searchForm[i]
				// 	}
				// }
			
				request({
					url: '/api/example/Mt_safe_changes/detail/'+this.listid,
					method: 'get',
				}).then(res => {
					console.log(res.data);		
					this.list=res.data
					console.log(this.timestampToTime(1666108800));
					this.list.changetime=this.timestampToTime(res.data.changetime)
					this.list.trainingtime=this.timestampToTime(res.data.trainingtime)
					this.list.signaturepersoncharge='http://1.192.217.27:20000'+this.list.signaturepersoncharge.substring(69,122)
					this.list.signaturetrainee='http://1.192.217.27:20000'+this.list.signaturetrainee.substring(69,122)
					// console.log('http://1.192.217.27:30000',this.list.signaturepersoncharge.substring(69,122));
				}).catch(() => {
					console.log('1111111111');
				})
			},
			 timestampToTime(timestamp) {
			        var  date = new Date(timestamp );//时间戳为10位需*1000，时间戳为13位的话不需乘1000
			        var Y = date.getFullYear() + '-';
			        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
			        var D = date.getDate() + ' ';
			        return Y+M+D;
			    },
			handleClick(index, index1) {
				const item = this.list[index]
				request({
					url: '/api/example/Mt_safe_changes/' + item.id,
					method: 'delete'
				}).then(res => {
					uni.showToast({
						title: res.msg,
						complete: () => {
							this.$u.toast(res.msg)
							this.list.splice(index, 1)
							if (!this.list.length) this.mescroll.showEmpty()
						}
					})
				})
			},
			open(index) {
				this.list[index].show = true;
				this.list.map((val, idx) => {
					if (index != idx) this.list[idx].show = false;
				})
			},
			search() {
				if (this.isPreview == '1') return
				this.searchTimer && clearTimeout(this.searchTimer)
				this.searchTimer = setTimeout(() => {
					this.list = [];
					this.mescroll.resetUpScroll();
				}, 300)
			},
			goDetail(id, status) {
				let btnType = ''
				let btnList = []
				btnList.push('btn_edit')
				btnList.push('btn_detail')
				if (btnList.includes('btn_detail')) {
					btnType = "btn_detail"
				}
				if (btnList.includes('btn_edit')) {
					btnType = "btn_edit"
				}
				if (!btnType) return
				this.jumPage(id, status, btnType)
			},
			addPage() {
				this.jumPage()
			},
			jumPage(id, status, btnType) {
				if (!id && !status) btnType = 'btn_add'
				uni.navigateTo({
					url: id ? './form?menuId=' + this.menuId + '&jurisdictionType=' + btnType + '&id=' + id :
						'./form?menuId=' + this.menuId + '&jurisdictionType=' + btnType
				})
			},
			cellClick(item) {
				if (this.sortValue === item.value) return
				this.listQuery.sort = item.sort
				this.listQuery.sidx = item.sidx
				this.sortValue = item.value
				this.$refs.uDropdown.close();
				this.$nextTick(() => {
					this.list = [];
					this.mescroll.resetUpScroll();
				})
			},
			reset() {
				this.$refs.searchForm.resetFields()
			},
			closeDropdown() {
				this.$refs.uDropdown.close();
				this.$nextTick(() => {
					this.list = [];
					this.mescroll.resetUpScroll();
				})
			},
			dataList(data) {
				let _list = []
				for (let i = 0; i < data.list.length; i++) {
					let _data = data.list[i]
					_list.push(_data)
				}
				return _list;
			},
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #f0f2f6;
		height: 100%;
		/* #ifdef MP-ALIPAY */
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;

		/* #endif */
		.changes-container {
			width: calc(100% - 40rpx);
			margin: 20rpx auto 0 auto;
			border-radius: 16rpx;

			.change-card {
				padding: 30rpx 20rpx;
				background-color: #fff;
				border-radius: 16rpx;
				margin-bottom: 20rpx;
				display: flex;

				.change-icon {
					flex-shrink: 0;
					margin-right: 20rpx;
				}

				.change-right {
					width: 100%;

					.change-top {
						display: flex;
						align-items: center;
						justify-content: space-between;

						h1 {
							font-size: 34rpx;
							font-weight: bold;
							color: #333333;
						}
					}

					.change-course {
						display: flex;
						align-items: center;
						margin-top: 20rpx;

						P {
							font-size: 30rpx;
							color: #333333;

							&:last-child {
								margin-left: 28rpx;
							}
						}
					}

					.achievement {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin: 20rpx 0;

						p {
							font-size: 26rpx;
							color: #797F85;

							&:last-child {
								color: #52D99F;
							}
						}
					}

					.change-time {
						font-size: 24rpx;
						color: #797F85;
					}
				}
			}
			.list-warp {
				.list {
					.list-box {
						background-color: #fff;
						border-radius: 16rpx;
						overflow: hidden;
						padding: 10rpx 20rpx;
						.item {
							.item-cell {
								display: flex;
								justify-content: space-between;
								align-items: center;
								border-bottom: 1px solid #F9F9F9;
								padding: 20rpx 12rpx ;
			
								text {
									font-size: 30rpx;
			
									&:first-child {
										color: #333;
									}
			
									&:last-child {
										color: #797F85;
									}
								}
							}
						}
					}
				}
			}
			.charge-img{
				background-color: #fff;
				border-radius: 16rpx;
				margin-top: 20rpx;
				padding: 20rpx;
				h1{
					font-size: 30rpx;
					color: #333333;
					margin-bottom: 20rpx;
				}
			}
		}
	}
</style>
